<template>
  <s-layout class="set-wrap" title="平台福利" :bgStyle="{ color: '#f7f7f7' }">
    <s-empty v-if="state.list.length === 0 && !state.loading" text="暂无常见问题" icon="/static/collect-empty.png" />
    <view class="flex flex-col gap-4 p-4">
      <view class="grid grid-cols-4 place-content-center place-items-center">
        <view class="flex flex-col gap-1 justify-center items-center" v-for="(i, k) in state.data" :key="k" @click="handleClick(k)">
          <image :src="i.url" mode="scaleToFill" class="size-[48px]" />
          <view class="text-[14px]" :class="state.active === k ? 'text-[#0788C8] font-bold' : 'text-[#41617A]'">{{ i.name }}</view>
        </view>
      </view>
      <!-- 现金补贴 -->
      <!-- 现金补贴 -->
      <!-- 股票期权 -->

      <!-- 现金补贴 -->
      <template v-if="state.active === 0 || state.active === 1">
        <view class="flex overflow-hidden flex-col gap-4 p-4 bg-white rounded-lg">
          <view class="flex gap-1 items-center">
            <image src="/static/Frame@3x.png" class="size-5" mode="scaleToFill" />
            <view class="font-medium text-[16px] text-[#0788C8]">明细 </view>
          </view>
          <view class="grid grid-cols-4">
            <view class="flex flex-col items-center">
              <view class="text-[22px] text-[#1A1A1A] font-bold gap-1">{{ state.list.today }}</view>
              <view class="text-[13px] text-[rgba(26,26,26,0.68)]"> 今日收入 </view>
            </view>
            <view class="flex flex-col items-center">
              <view class="text-[22px] text-[#1A1A1A] font-bold gap-1">{{ state.list.yesterday }}</view>
              <view class="text-[13px] text-[rgba(26,26,26,0.68)]"> 昨日收入 </view>
            </view>
            <view class="flex flex-col items-center">
              <view class="text-[22px] text-[#1A1A1A] font-bold gap-1">{{ state.list.month }}</view>
              <view class="text-[13px] text-[rgba(26,26,26,0.68)]"> 本月收入 </view>
            </view>
            <view class="flex flex-col items-center">
              <view class="text-[22px] text-[#1A1A1A] font-bold gap-1">{{ state.list.total }}</view>
              <view class="text-[13px] text-[rgba(26,26,26,0.68)]"> 累计收入 </view>
            </view>
          </view>
        </view>
        <!-- <template v-if="state.active == 0">
          <view
            class="h-[158px] bg-center bg-no-repeat bg-cover rounded-lg overflow-hidden box-border"
            style="background-image: url('/static/bg@3xPlatform.png')"
          >
            <view class="flex flex-col gap-3 justify-between p-4">
              <view class="text-[16px] text-[#0788C8]"> 可提现余额(元) </view>
              <view class="text-[28px] text-[#0788C8] font-bold"> {{ state.balance }} </view>
              <view class="flex items-center">
                <view class="px-4 py-2 bg-[#FFFFFF] rounded-[6px_6px_6px_6px] grid place-items-center" @click="toWithdraw">
                  <view class="text-[14px] text-[#0078D3] font-medium"> 立即提现 </view>
                </view>
              </view>
            </view>
          </view>
        </template> -->
        <template v-if="state.active == 1">
          <view
            class="h-[158px] bg-center bg-no-repeat bg-cover rounded-lg overflow-hidden box-border"
            style="background-image: url('/static/18975472413.png')"
          >
            <view class="flex flex-col gap-3 justify-between p-4">
              <view class="text-[16px] text-[#0788C8]"> 可兑换数量 </view>
              <view class="text-[28px] text-[#0788C8] font-bold"> {{ state.list.gp }} </view>
              <view class="flex gap-2 items-center">
                <view class="px-4 py-2 bg-[#FFFFFF] rounded-[6px_6px_6px_6px] grid place-items-center" @click="confirmExchange">
                  <view class="text-[14px] text-[#0078D3] font-medium"> 立即兑换 </view>
                </view>
                <view class="px-4 py-2 bg-[#FFFFFF] rounded-[6px_6px_6px_6px] grid place-items-center" @click="toExchangeDetail">
                  <view class="text-[14px] text-[#0078D3] font-medium"> 兑换明细 </view>
                </view>
              </view>
            </view>
          </view>
        </template>
      </template>
    </view>

    <view class="fixed right-0 bottom-0 left-0 p-4 bg-white" v-if="0">
      <u-button type="primary" size="medium" @click="confirmExchange">确认兑换</u-button>
    </view>
  </s-layout>
</template>

<script setup>
  import sheep from '@/sheep';

  const state = ref({
    list: {},
    loading: true,
    balance: 0,
    data: [
      {
        name: '现金补贴',
        url: '/static/frame4.png',
      },
      {
        name: '股票期权',
        url: '/static/frame1.png',
      },
      {
        name: '全球旅行',
        url: '/static/frame2.png',
      },
      {
        name: '产业基金',
        url: '/static/frame3.png',
      },
    ],
    active: 1,
  });

  gpInfo();
  onPullDownRefresh(() => {
    gpInfo();
    setTimeout(() => {
      uni.stopPullDownRefresh();
    }, 500);
  });
  function gpInfo(params) {
    let obj = {};
    sheep.$api.yy.gpInfo(obj).then((res) => {
      state.value.list = res.data;
    });
  }
  function handleClick(k) {
    // 如果点击全球旅行或家族传承,则不执行任何操作
    if (k === 2 || k === 3 || k === 0) {
      // 提示
      uni.showToast({
        title: '暂未开放',
        icon: 'none',
      });
      return;
    }
    state.value.active = k;
  }
  function confirmExchange() {
    // pages/yy/exchange
    uni.navigateTo({
      url: '/pages/yy/exchange',
    });
  }
  function toExchangeDetail() {
    // moneyy
    uni.navigateTo({
      url: '/pages/user/wallet/moneyy',
    });
  }
</script>

<style lang="scss" scoped></style>
